<template>
  <div class="page-content">
    <div class="table-box">
      <my-table
        :is-call-api="false"
        :show-index="true"
        :table-data="isCallApi ? userList : currentTableData"
        :column-data="columnData"
        :operate-btn="operateBtn"
        :show-operate="true"
        :border="false"
        :stripe="true"
        :pagination-data="paginationData"
        @handleClick="handleClick"
        @pageSizeChange="handleSizeChange"
        @pageCurrentChange="handleCurrentChange"
      />
    </div>
    <my-dialog
      :dialog-visible="openDialog"
      dialog-width="700px"
      @closeDialog="visibleChange"
    >
      <template slot="content">
        123
      </template>
    </my-dialog>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getUserInfo } from '@/utils/auth'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      isCallApi: false, // 不调接口的分页
      openDialog: false,
      // '弹窗表格数据'
      pageSize: {
        current: 1,
        size: 10
      }
    }
  },
  computed: {
    ...mapGetters('myUser', ['userList']),
    // 表格列
    columnData() {
      return [
        { prop: 'id', label: 'ID', width: '70', align: 'center', fixed: 'left' },
        { prop: 'userName', label: '姓名', width: '110', align: 'center', fixed: 'left' },
        { prop: 'age', label: '年龄', align: 'center', fixed: 'left' },
        { prop: 'sex', label: '性别', align: 'center', render: row => this.getCodeName([
          {
            value: 1,
            label: '男'
          },
          {
            value: 0,
            label: '女'
          }
        ], row.sex) },
        { prop: 'address', label: '地址', minWidth: '270', align: 'center' },
        { prop: 'phone', label: '电话', align: 'center', minWidth: '170' }
      ]
    },
    // 分页时的表格数据
    currentTableData() {
      let tempTableData = []
      tempTableData = this.userList.slice(
        (this.pageSize.current - 1) * this.pageSize.size,
        this.pageSize.current * this.pageSize.size
      )
      return tempTableData
    },
    // 右侧操作按钮
    operateBtn() {
      return [
        {
          label: '编辑',
          type: 'text',
          size: 'mini',
          icon: 'el-icon-edit',
          event: 'edit'
        },
        {
          label: '删除',
          type: 'text',
          size: 'mini',
          icon: 'el-icon-delete',
          event: 'delete'
        }
      ]
    },
    // 分页组件传参
    paginationData() {
      return {
        current: this.pageSize.current,
        pageSize: this.pageSize.size,
        size: [10, 20, 30, 40],
        total: this.currentTableData.length
      }
    }
  },
  created() {
    // 获取用户信息
    const userInfo = JSON.parse(getUserInfo())
    console.log('2222', userInfo)
    const params = {
      sonId: userInfo.sonId
    }
    this.GetUserList(params)
  },
  methods: {
    ...mapActions('myUser', ['GetUserList']),
    // 表格右侧操作列，操作按钮
    handleClick(row) {
      console.log(row)
      this.openDialog = true
    },
    // 自定义显示与隐藏
    visibleChange(data) {
      console.log('子组件调用父组件的方法', data)
      this.openDialog = data
    },
    // 页数大小变化
    handleSizeChange(data) {
      this.pageSize.size = data
      this.pageSize.current = 1
    },
    // 页数发生变化
    handleCurrentChange(data) {
      this.pageSize.current = data
    },
    // 解码
    getCodeName(dataList, data) {
      if (dataList.length) {
        const tempArr = dataList.filters(item => item.value === data)
        if (tempArr.length) {
          return tempArr[0].label
        } else {
          return data
        }
      } else {
        return data
      }
    }
  }
}
</script>
  <style scoped lang="scss">
    .page-content{
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      padding: 20px;
      height: calc(100vh - 50px) !important;
      .table-box{
        flex: 1;
      }
    }
  </style>
